<template>
  <div class="main-container flex">
    
    <!-- <main-content title="用户列表" :paddingLeft="205" padding-top="94">
      <div slot="search">
        <div class="search-box">
          <el-input
            size="small"
            placeholder="请输入要查询的姓名"
            style="width: 200px; margin-right: 5px"
          ></el-input>
          <el-input
            size="small"
            placeholder="请输入要查询的工号"
            style="width: 200px; margin-right: 5px"
          ></el-input>

          <el-date-picker
              size="small"
              v-model="value1"
              class="data_change"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
          &nbsp;&nbsp;&nbsp;
          <el-button type="primary" icon="el-icon-search" size="small" @click="searchUser">{{ $t("searchModule.searchBtn") }}</el-button>
          <el-button icon="el-icon-refresh" size="small" @click="searchReset">{{$t("searchModule.searchReset")}}</el-button>
          <el-button size="small" type="primary"><i class="el-icon-upload el-icon--right"></i>&nbsp;导出当前</el-button>
          <el-button size="small" type="primary"><i class="el-icon-upload el-icon--right"></i>&nbsp;导出全部</el-button>

        </div>
      </div>
      <div slot="table" class="border">
          <div class="counts">
            lefyt
          </div>
          <div class="counts1">
            right
          </div>
        </div>
    </main-content> -->
    
      <div class="left">
        <div class="company_name">公司信息</div>
        <el-tree
            :data="companiesTree"
            :props="defaultProps"
            ref="cTree"
            node-key="F_DepartmentId"
            :default-expand-all="true"
            @node-click="handleNodeClick" >
            <span class="custom-tree-node" slot-scope="{ node, data }"><i class="icon-map-site"></i><span>{{ data.F_FullName }}</span></span>
        </el-tree>
      </div>
      <div class="right">
        <div class="search_box">
          <div>
            <el-input class="el_input_width" v-model="employeeName" placeholder="请输入员工姓名或工号"></el-input>
          </div>
          <div>
            <el-date-picker class="el_date_width" v-model="times" type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
          </div>
          <div class="search_btn">
            <el-button size="small" type="primary" icon="el-icon-search">查询</el-button>
          </div>
          <div class="search_btn">
            <el-button size="small" type="primary" icon="el-icon-refresh-left">重置</el-button>
          </div>
          <div class="search_btn">
            <el-button size="small" type="primary"><i class="el-icon-download el-icon--left"></i>导出</el-button>
          </div>
        </div>
        <div class="analysis">
          <div class="left1">
            <div class="mingxi1">部门全勤占比分析</div>
            <div class="circular" id="main"></div>

            <div class="flex1">
              <div class="items1">
                  <p class="numberss1 color_blue">18</p>
                  <p class="titless">
                    <span class="blue_spot"></span>全勤数(人)
                  </p>
              </div>
              <div class="items1">
                  <p class="numberss1 color_red">5</p>
                  <p class="titless">
                    <span class="red_spot"></span>未全勤(人)
                    </p>
              </div>
            </div>
          </div>
          <div class="right1">
            <div class="mingxi flex">
              <div>部门考勤明细</div>
              <div>2022年3月～2022年4月</div>
            </div>
            <div class="countsss">
              <div class="top flex1">
                <div class="items">
                  <p class="numberss">8.8</p>
                  <p class="titless">平均工时</p>
                </div>
                <div class="items">
                  <p class="numberss">3</p>
                  <p class="titless">迟到(人)</p>
                </div>
                <div class="items">
                  <p class="numberss">4</p>
                  <p class="titless">早退(人)</p>
                </div>
              </div>
              <div class="height1"></div>
              <div class="bottom flex1">
                <div class="items">
                  <p class="numberss">4</p>
                  <p class="titless">却卡(人)</p>
                </div>
                <div class="items">
                  <p class="numberss">2</p>
                  <p class="titless">旷工(人)</p>
                </div>
                <div class="items">
                  <p class="numberss">2</p>
                  <p class="titless">外勤(人)</p>
                </div>
                <div class="items">
                  <p class="numberss">20</p>
                  <p class="titless">加班(人)</p>
                </div>
                <div class="items">
                  <p class="numberss">7</p>
                  <p class="titless">出差(人)</p>
                </div>
                <div class="items">
                  <p class="numberss">7</p>
                  <p class="titless">病假(人)</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="table_box border">
          <div class="table_title">部门考勤记录</div>
          <div class="table_header flex2">
            <div class="table_header_items">工号</div>
            <div class="table_header_items">部门</div>
            <div class="table_header_items">姓名</div>
            <div class="table_header_items">入职日期</div>
            <div class="table_header_items">考勤月份</div>
            <div class="table_header_items">应该出勤(天)</div>
            <div class="table_header_items">实际出勤(天)</div>
            <div class="table_header_items">事假(天)</div>
            <div class="table_header_items">病假(天)</div>
            <div class="table_header_items">是否全勤</div>
            <div class="table_header_items1">
              <span @click="selectMenu">...</span>
              <div class="table_header_menu" v-show="selectMenuFlag">
                <div class="table_header_menu_items"><el-checkbox v-model="checked">入职日期</el-checkbox></div>
                <div class="table_header_menu_items"><el-checkbox v-model="checked">姓名</el-checkbox></div>
                <div class="table_header_menu_items"><el-checkbox v-model="checked">是否全勤</el-checkbox></div>
                <div class="table_header_menu_items"><el-checkbox v-model="checked">病假</el-checkbox></div>
              </div>
            </div>
          </div>
          <div class="table_body flex2" v-for="(item,index) in 5" :key="index">
            <div class="table_body_items">201548</div>
            <div class="table_body_items">人事部</div>
            <div class="table_body_items user_name" @click="toDetails">吴冠圣</div>
            <div class="table_body_items">2022-3-4</div>
            <div class="table_body_items">2022-3</div>
            <div class="table_body_items">23</div>
            <div class="table_body_items">20</div>
            <div class="table_body_items">2</div>
            <div class="table_body_items">2</div>
            <div class="table_body_items">否</div>
            <div class="table_header_items2">...</div>
          </div>
        </div>
      </div>
      <el-drawer
        title="详情"
        :visible.sync="drawer"
        :with-header="false">
        <span>我来啦!</span>
      </el-drawer>
  </div>
</template>

<script>
import { getCompaniesTree } from "@/api/organization/user";
export default {
  name: "attendancestatisticsList",
  data() {
    return {
      fixedTitle: this.$t("orgUserManagement.fixedTitle"),
      companiesTree: [],
      defaultProps: {
        children: "children",
        label: "F_FullName",
      },
      F_DepartmentId: "",
      employeeName:'',
      times:'',
      drawer:false,
      selectMenuFlag:false,
      checked:true
    };
  },
  async created() {
    this.getCompaniesTree();
  },
  mounted() {
    this.init()
  },
  methods: {
    /* 获取公司树形菜单数据 */
    getCompaniesTree() {
      getCompaniesTree().then((res) => {
        this.companiesTree = res.data.data;
      });
    },
    /* 选择树形菜单加载公司用户信息 */
    async handleNodeClick(data) {
      console.log("-=-=", data);
    },
    init(){
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'right'
        },
        series: [
          {
            name: '出勤人数',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 18, name: '全勤' },
              { value: 5, name: '未全勤' },
             
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      option && myChart.setOption(option);
    },
    toDetails(){
      this.drawer = true
    },
    selectMenu(){
      this.selectMenuFlag = !this.selectMenuFlag
    },
   
  },
};
</script>

<style scoped>
.border{
  border: 1px solid red;
}
.company_name{
  width: 90%;
  height: 40px;
  margin: 0 auto;
  font-size: 18px;
  color: #333;
  line-height: 40px;
  text-align: center;
  border-bottom: 1px solid #f8f8f8;
  margin-bottom: 8px;
}
.flex{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.flex1{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.left{
  width: 20%;
  height: 100%;
  background: #fff;
  overflow: scroll;
}
.right{
  width: 79.5%;
  height: 100%;
  background: #fff;
  overflow: scroll;
}
.search_box{
  width: 100%;
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start
  
}
.el_input_width{
  width: 200px;
  height: 32px!important;
  margin-left: 8px;
}
::v-deep .el-input__inner{
  height: 32px!important;
}
.el_date_width{
  height: 32px!important;
  margin-left: 24px;
}
.search_btn{
  margin-left: 24px;
}
.analysis{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.table_box{
  margin: 8px;
  border: 1px solid #f8f8f8;
  border-radius: 4px;
  box-shadow: 0px 0px 1px 1px #f8f8f8;
}
.left1{
  width: 30%;
  height: 300px;
  box-shadow: 0px 0px 1px 1px #f8f8f8;
  border: 1px solid #f8f8f8;
  border-radius: 4px;
  margin: 8px;
}
.flex2{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.right1{
  width: 68%;
  height: 300px;
  box-shadow: 0px 0px 1px 1px #f8f8f8;
  border: 1px solid #f8f8f8;
  border-radius: 4px;
  margin: 8px;
}
.mingxi{
  width: 95%;
  height: 40px;
  margin: 0 auto;
  border-bottom: 1px solid #f8f8f8;
  
}
.mingxi1{
  width: 95%;
  height: 40px;
  margin: 0 auto;
  line-height: 40px;
  font-size: 14px;
  color: #999;
}
.mingxi > div{
  line-height: 40px;
  font-size: 14px;
  color: #999;
}
.top,.bottom{
  height: 130px;
}
.top{
  width: 340px;
  margin: 0 auto;
}
.height1{
  width: 100%;
  height: 1px;
  background: #f8f8f8;
}
.bottom{
  width: 640px;
  margin: 0 auto;
}
.items{
  width: 90px;
  height: 90px;
}
.items > p{
  line-height: 0.5em;
}
.items1{
  width: 90px;
  height: 60px;
}
.items1 > p{
  line-height: 0.5em;
}
.numberss{
  font-size: 16px;
  color: #333;
  text-align: center;
  margin-top:25px;
}
.numberss1{
  font-size: 16px;
  color: #333;
  text-align: center;
}
.numberss1:hover{
  color: #0063f5;
  cursor: pointer;
}
.numberss:hover{
  color: #0063f5;
  cursor: pointer;
}

.titless{
  font-size: 14px;
  color: #999;
  text-align: center;
}
.blue_spot{
  display: block;
  width: 8px;
  height: 8px;
  background: #0063f5;
  border-radius: 50%;
  position: relative;
  top: 8px;
}
.red_spot{
  display: block;
  width: 8px;
  height: 8px;
  background: #f67e7e;
  border-radius: 50%;
  position: relative;
  top: 8px;
}
.color_blue{
  color: #0063f5!important;
}
.color_red{
  color: #f67e7e!important;
}
.circular{
  width: 100%;
  height: 180px;
}
.table_title{
  height: 40px;
  font-size: 16px;
  color:#999;
  line-height: 40px;
  margin-left: 8px;
}
.table_header{
  height: 32px;
  margin: 0 8px;
  background: #f2f2f2;
  border-radius: 4px;
}
.table_body{
  height: 40px;
  margin: 4px 8px;
  border-radius: 4px;
}
.table_body:hover{
  background: #f2f2f2;
}
.table_header_items{
  width: 130px;
  height: 24px;
  border-right: 1px solid #666;
  font-size: 16px;
  color: #333;
  text-align: center;
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}
.table_body_items{
  width: 130px;
  height: 40px;
  font-size: 16px;
  color: #999;
  text-align: center;
  line-height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;

}
.table_header_items1{
  width: 24px;
  height: 24px;
  color: #333;
  text-align: center;
}
.table_header_items1:hover{
  cursor: pointer;
}
.table_header_items2{
  width: 40px;
  height: 24px;
  color: #333;
  text-align: center;
  line-height: 24px;
  visibility: hidden;
}
.user_name:hover{
  color: #0063f5;
  cursor: pointer;
}
.table_header_menu{
  width: 120px;
  height: 200px;
  background: #fff;
  box-shadow: 0 0 5px #ddd;
  overflow: scroll;
  position: relative;
  z-index: 100;
  top:15px;
  left: -80px;
  border-radius: 8px;
}
.table_header_menu_items{
  width: 95%;
  height: 28px;
  margin: 4px auto;
  text-align: left;
}
/* css */
.main-container {
  height: 100%;
  padding: 0 8px;
}
.el-form {
  display: flex;
  flex-wrap: wrap;
}
.manager-box {
  display: flex;
}
div /deep/ .el-form div:nth-child(odd) .el-form-item .el-form-item__label {
  text-align: right;
}
.authorizedialog /deep/.el-dialog {
  height: calc(100% - 18vh);
  margin-bottom: 0;
}
.authorizedialog /deep/.el-dialog__body {
  height: calc(100% - 114px);
}
@media screen and (max-width: 1123px) {
  /deep/ .avue-crud__left {
    margin-left: 5px !important;
    float: left;
    margin-top: 40px;
  }
}
div /deep/ .custom-tree-node span {
  font-size: 14px;
  padding-left: 10px;
}
div /deep/ .custom-tree-node i {
  font-size: 12px !important;
}
.upload-box {
  margin-right: 0px;
}

</style>
